<template>
  <div>
    <div class="header">
    <div class="left">
        <div class="logo"></div>
        <div class="name">江山市投资项目全周期管理  "e键通"  系统</div>
    </div>
    <div class="right">
        <div class="work">
            <span class="icon-diannao icon"></span>
            <span>业务平台</span>
        </div>
        <div class="user">
            <span class="icon-yonghu icon"></span>
            <span>住建局</span>
            <span class="icon-xiala" style="margin-left:10px"></span>
        </div>
    </div>
    </div>
    <div class="Tab">
    <div class="left">
        <div class="tab">
            <div class="top">
                <router-link 
                v-for="(item) in TabData" 
                :key="item.id" :to="item.link" tag="div"
                :class="routName == item.name ? 'active' : ''"
                >{{item.title}}
                </router-link>
                <!-- <div>省重点计划</div>
                <div>“三级四重”计划</div>
                <div>市重点计划</div>
                <div>市政府投资计划</div>
                <div>市服务业计划</div> -->
                <span>...</span>
            </div>
            <div class="bottom">
                <router-link 
                v-for="(item) in TabData2" 
                :key="item.id" :to="item.link" tag="div"
                :class="routName == item.name ? 'active' : ''"
                >{{item.title}}
                </router-link>
                <!-- <div>住建局54</div>
                <div>经济开发区45</div>
                <div>经济开发区45</div>
                <div>经济开发区45</div>
                <div>经济开发区45</div> -->
                <span>...</span>
            </div>
        </div>
        <div class="left-b">
            <div class="title"><u>全市</u> 2022年 <u>市建设计划</u>项目库</div>
            <div class="content">
                <div class="all">
                    <div>项目数：<div class="b_blue">418<span>个</span></div></div>
                    <div>总投资：<div class="b_blue">276.6<span>亿元</span></div></div>
                    <div>年度计划投资：<div class="b_blue">126.3<span>亿元</span></div></div>
                </div>
                <div class="details">
                    <div>续建：<div class="b_blue">45<span>个</span></div></div>
                    <div>总投资：<div class="b_blue">98.5<span>亿元</span></div></div>
                    <div>年度计划投资：<div class="b_blue">98.7<span>亿元</span></div></div>
                    <div>新建：<div class="b_blue">25<span>个</span></div></div>
                    <div>总投资：<div class="b_blue">98.5<span>亿元</span></div></div>
                    <div>年度计划投资：<div class="b_blue">98.7<span>亿元</span></div></div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="top">
            <div class="top-1"></div>
            <div class="top-2">
                <div>
                    <span class="current"></span>
                    <div class="word">交投集团</div>
                </div>
                <div class="title">项目推进绩效</div>
                <div>数据截止12月底</div>
            </div>
            <div class="top-3">
                <div>
                    <span class="word">总得分</span>
                    <span class="number">37.13分</span>
                </div>
                <div>
                    <span class="word">排名</span>
                    <span class="number">37</span>
                </div>
            </div>
            <p>
                <span class="fff">较上月</span>
                <span class="lv">-2  ↓</span>
                <span class="lv"></span>
            </p>
            <div class="top-4" v-show="!isshow">
                <div class="word">过程管理</div>
                <div class="current">?</div>
                <div class="jia">+</div>
                <div class="word">项目绩效</div>
                <div class="current">?</div>
                <div class="icon-zhankai" @click="zhankai"></div>
            </div>
            <transition name="fade">
            <div class="top-5" v-show="isshow">
                <div class="title">
                    <div class="word">过程管理</div>
                    <div class="current">?</div>
                    <div class="icon-zhankai" @click="zhankai"></div>
                </div>
                <div class="content">
                    <div class="con">
                        <div class="smallBox">
                            <div class="circle"></div>
                            <div class="text">工作效率</div>
                            <div class="number">8分</div>
                        </div>
                        <div class="description">(未按时上报数据2次)</div>
                    </div>
                    <div class="con2 con">
                        <div class="smallBox">
                            <div class="circle"></div>
                            <div class="text">计划编排</div>
                            <div class="number">2.8分</div>
                        </div>
                        <div class="description">(年度计划投资占比2.33%)</div>
                    </div>
                </div>
                <div class="title" style="margin-top:20px">
                    <div class="word">项目绩效</div>
                    <div class="current">?</div>
                </div>
                <div class="content">
                    <div class="con">
                        <div class="smallBox">
                            <div class="circle"></div>
                            <div class="text">开工入库</div>
                            <div class="number">13.33分</div>
                        </div>
                        <div class="description">(新建项目数3个、新开工项目数2个、新建项目开工率66.67%)</div>
                    </div>
                    <div class="con2 con">
                        <div class="smallBox">
                            <div class="circle"></div>
                            <div class="text">节点预警</div>
                            <div class="number">5分</div>
                        </div>
                        <div class="description">(预警项目个数3个、预警率75%)</div>
                    </div>
                    <div class="con3 con">
                        <div class="smallBox">
                            <div class="circle"></div>
                            <div class="text">投资执行</div>
                            <div class="number">8分</div>
                        </div>
                        <div class="description">(年度计划投资4.8亿元，完成投资1.46亿元，年度投资完成率30.5%)</div>
                    </div>
                </div>
            </div>
            </transition>
        </div>
    </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    routName:"",
    TabData:[
        {
            id:"1",
            name:"housing",
            title:"市建设计划",
            link:"/housing",
        },
        {
            id:"2",
            // name:"home",
            title:"省重点计划",
            link:"/home",
        },
        {
            id:"3",
            // name:"home",
            title:"“三级四重”计划",
            link:"/home",
        },
        {
            id:"4",
            // name:"home",
            title:"市重点计划",
            link:"/home",
        },
        {
            id:"5",
            // name:"home",
            title:"市政府投资计划",
            link:"/home",
        },
        {
            id:"6",
            // name:"home",
            title:"市服务业计划",
            link:"/home",
        }
    ],
    TabData2:[
        {
            id:"1",
            name:"home",
            title:"全市418",
            link:"/home",
        },
        {
            id:"2",
            name:"housing",
            title:"住建局54",
            link:"/housing",
        },
        {
            id:"3",
            // name:"home",
            title:"经济开发区45",
            link:"/home",
        },
        {
            id:"4",
            // name:"home",
            title:"经济开发区45",
            link:"/home",
        },
    ],
    isshow:false
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {
    $route(){
        this.routName = this.$route.name;
    }
},
//方法集合
methods: {
    zhankai(){
        this.isshow=!this.isshow
    },
},
beforeCreate() {}, //生命周期 - 创建之前
created() {
   
}, //生命周期 - 创建完成（可以访问当前this实例）
beforeMount() {}, //生命周期 - 挂载之前
mounted() {
    this.routName = this.$route.name;
}, //生命周期 - 挂载完成（可以访问DOM元素）
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.layout-bg{
    width: 100%;
    height: 856px;
    background: url("@/assets/images/big_bgg.jpg")center no-repeat;
    color: #fff;
    // font-weight: bold;
    position: relative;
    animation:all 2s;
    transition: all 1.2s;
    .text{
        position: absolute;
        bottom: 220px;
        left: 30%;
        display: flex;
        line-height: 40px;
        img{
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 15px;
        }
        .dev-text{
            font-size: 36px;
            font-family: devtext;
        }
        .bot-text{
            font-size: 15.2px;
            span{
                font-size: 18px;
                font-family: bottext;
            }
        }
    }
}
.header{
    height: 80px;
    line-height: 80px;
    background:url("@/assets/images/城市剪影.png") no-repeat;
    background-position-x: 65%;
    background-size: contain;
    background-color: #1391ff;
    display: flex;
    justify-content: space-between;
    .left{
        margin-left: 30px;
        display: flex;
        .logo{
            width: 59px;
            height: 53px;
            background:url("@/assets/images/logo(电脑端）.png") no-repeat;
            background-size: cover;
            margin-right: 20px;
            margin-top: 12px;
            vertical-align: middle;
        }
        .name{
            font-size: 24px;
            color: #fff;
            font-family: yousheBlack;
        }
    }
    .right{
        display: flex;
        color: #fff;
        font-size: 12px;
        .icon{
            margin-right: 10px;
            vertical-align: middle;
            font-size: 26px;
        }
        .work,.user{
            margin-right: 40px;
        }
    }
}
.Tab{
    display: flex;
    .left{
        width: 74%;
        margin-left: 10px;
        box-shadow: 0px 9px 17px -13px #e4e4e4;
        .tab{
            width: 100%;
            color: #a9a8ad;
            font-size: 12px;
            margin-bottom: 10px;
            span{
                display: inline-block;
                height: 24px;
                line-height: 55px;
            }
            .top,.bottom{
                display: flex;
                div{
                    border: 1px solid #a9a8ad;
                    height: 24px;
                    line-height: 24px;
                    padding: 0 5px;
                    margin: 10px 10px 0px 0px;
                    cursor: pointer;
                }
                .active{
                    background-color: #008aff;
                    color: #fff;
                }
            }
        }
        .left-b{
            width: 100%;
            height: 120px;
            background-color: #fff;
            position: relative;
            .title{
                font-size: 14px;
                font-weight: bold;
                margin: 10px 0 10px 20px;
                color: #000;
                padding-top: 8px;
            }
            .title::before{
                content:'';
                position: absolute;
                width: 4px;
                height: 15px;
                background-color: #008aff;
                top: 11px;
                left: 8px;
            }
            .content{
                display: flex;
                margin: 10px;
                color: #080808;
                font-weight: bold;
                margin-top: 10px;
                .all{
                    margin-top: 20px;
                }
                .all,.details{
                    display: flex;
                    justify-content: space-around;
                    width: 50%;
                    font-size: 14px;
                    div{
                        font-size: 14px;
                        display: flex;
                        margin: 0 0 10px 0;
                        .b_blue{
                            display: block;
                            width: 48px;
                            height: 25px;
                            text-align: center;
                            line-height: 25px;
                            color: #fff;
                            background-color: #0d91ff;
                            padding: 0px 10px;
                            margin-right: 10px;
                            font-family: Digital;
                            span{
                                text-align: center;
                                font-size: 12px;
                                font-family: yousheBlack;
                            }
                        }
                    }
                }
                .details{
                    flex-wrap: wrap;
                    justify-content: space-between;
                    div{
                        width: 33%;
                    }
                }
            }
        }
    }
    .right{
        width: 23.5%;
        margin-left: 16px;
        margin-top: 10px;
        box-shadow: 0px 9px 17px -13px #e4e4e4;
        .top{
            position: relative;
            .top-1{
                height: 10px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                background-color: #a3dbfe;
            }
            .top-2{
                line-height: 30px;
                background-color: #008aff;
                color: #fff;
                display: flex;
                justify-content: space-between;
                padding: 5px 10px;
                border-bottom: 1px solid #75e0ff;
                font-size: 12px;
                position: relative;
                .current{
                    display: inline-block;
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    background-color: #fea300;
                    top: 18px;
                } 
                .word{
                    margin-left: 10px;
                }
                .title{
                    font-size: 16px;
                    font-weight: bold;
                }
            }
            .top-3{
                display: flex;
                justify-content: space-between;
                background-color: #008aff;
                padding: 15px 10px;
                padding-bottom: 0px;
                div{
                  background-color: #4598f4;  
                  padding: 5px 15px;
                  color: #fff;
                  line-height: 15px;
                  .word{
                    font-size: 12px;
                    margin-right: 15px;
                  }
                  .number{
                    font-size: 16px;
                  }
                }
            }
            p{
                background-color: #008aff;
                padding: 10px 10px;
                text-align: right;
                font-size: 12px;
                span{
                    margin-left: 10px;
                }
                .fff{
                        color: #fff;
                    }
                .lv{
                    color: #06cd92;
                }
            }
            .top-4{
                height: 34px;
                padding: 15px 10px;
                color: #000;
                background-color: #fff;
                line-height: 22px;
                .fade-enter-active, .fade-leave-active {
                transition: opacity .5s;
                }
                .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                opacity: 0;
                }
                .word{
                    font-weight: bold;
                    margin-right: 30px;
                    float: left;
                    font-size: 14px;
                    padding: 5px 0;
                    border-bottom: 2px solid #5199e3;
                }
                .current{
                    float: left;
                    margin-right: 30px;
                    background-color: #f0aa3b;
                    text-align: center;
                    font-size: 12px;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    color: #fff;
                    margin-top: 8px;
                    line-height: 15px;
                }
                .jia{
                    float: left;
                    margin-right: 30px;
                    margin-top: 5px;
                }
                .icon-zhankai{
                    float: left;
                    color: #008aff;
                    position: relative;
                    top: 5px;
                    // margin-top: 8px;
                }
                .icon-xiala{
                    float: left;
                    color: #008aff;
                    margin-top: 8px;
                    font-size: 20px;
                }
            }
            .fade-enter-active, .fade-leave-active {
                transition: opacity .1s;
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                opacity: 0;
            }
            .top-5{
                width: 94%;
                transition: 2s;
                position: absolute;
                top: 133px;
                padding: 15px 10px;
                color: #000;
                background-color: #fff;
                line-height: 22px;
                z-index: 88;
                .fade-enter-active, .fade-leave-active {
                    transition: opacity .5s;
                }
                .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                    opacity: 0;
                }
                .title{
                    width: 100%;
                    display: flex;
                    border-bottom: 1px solid #ccc;
                    position: relative;
                    .word{
                        font-weight: bold;
                        font-size: 16px;
                        padding: 5px 0;
                        margin-right: 30px;
                        border-bottom: 2px solid #5199e3;
                    }
                    .current{
                        background-color: #f0aa3b;
                        text-align: center;
                        font-size: 12px;
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        color: #fff;
                        margin-top: 8px;
                        line-height: 15px;
                    }
                    .icon-zhankai{
                        color: #008aff;
                        position: absolute;
                        top: 5px;
                        right: 10px;
                        transform: rotate(180deg);
                        // margin-top: 8px;
                    }
                    // .icon-zhankai{
                    //     color: #008aff;
                    //     // margin-top: 8px;
                    //     margin-left: 188px;
                        
                    // }
                }
                .content{
                    margin-top: 10px;
                    background-color: rgb(247, 245, 245);
                    padding: 10px 0px;
                    border-radius: 5px;
                    border-bottom: 6px solid rgba(71, 150, 243);
                    display: flex;
                    flex-direction: column;
                    .con{
                        width: 100%;
                        .smallBox{
                            height: 10%;
                            width: 50%;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            .circle{
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                background-color: rgba(71, 150, 243);
                            }
                            .text{
                                width: 60px;
                                font-size: 12px;
                                padding-left: 5px;
                                font-weight: bold;
                            }
                            .number{
                                width: 75px;
                                text-align: right;
                                font-size: 18px;
                                font-weight: bold;
                                color: rgba(71, 150, 243);
                            }
                        }
                        .description{
                            font-size: 12px;
                            margin-top: 5px;
                            color: rgb(99, 99, 99);
                            text-indent: 1em;
                            width: 100%;
                        }
                    }
                    .con2{
                        width: 100%;
                        margin-top: 20px;
                        .circle{
                            background-color: rgba(110, 216, 180)!important;
                        }
                        .number{
                            color: rgba(110, 216, 180)!important;
                        }
                    }
                    .con3{
                        width: 100%;
                        margin-top: 20px;
                        .circle{
                            background-color: rgba(204, 117, 249)!important;
                        }
                        .number{
                            color: rgba(204, 117, 249)!important;
                        }
                    }
                }
            }
        }
    }
}
</style>